<template>
  <!-- 学习任务-课程详情 -->
  <view class="course-lesson">
    <view class="video-placeholder">
      <video
        id="myVideo"
        class="video"
        :src="coursedetailsData.video"
        :poster="coursedetailsData.cover"
        @ended="videoTimeEndedEvent"
        @timeupdate="videoTimeTimeupdateEvent"
        @play="videoPlay"
        @pause="videoPause"
      ></video>
    </view>
    <view class="course-info">
      <view class="course-header">
        <text class="course-title">{{ coursedetailsData.name }}</text>
        <view :class="['status', 'status-' + coursedetailsData.status]">{{
          getStatusText(coursedetailsData.status)
        }}</view>
      </view>
      <view v-if="coursedetailsData.integration" class="course-integration">
        <image class="img" :src="IMG_URL2 + 'inventory/money-circle.svg'" mode="aspectFill" />
        <view>获得{{coursedetailsData.integration}}积分</view>
      </view>
      <view class="course-description">{{ coursedetailsData.refer }}</view>
      <view class="course-meta">
        <view class="meta-item">
          <image class="img" :src="IMG_URL2 + 'peop/folder.svg'" mode="aspectFill" />
          <text>{{ coursedetailsData.categoryName }}</text>
        </view>
        <view class="meta-item" @click="changeLike">
          <image
            v-if="coursedetailsData.isLike"
            class="img"
            :src="IMG_URL2 + 'peop/thumb-up-1.svg'"
            mode="aspectFill"
          />
          <image v-else class="img" :src="IMG_URL2 + 'peop/thumb-up.svg'" mode="aspectFill" />
          <text>{{ coursedetailsData.like }}人点赞</text>
        </view>
      </view>
      <view class="course-assignment">
        <view class="label">分配员工：</view>
        <view class="value">{{ coursedetailsData.staffName }}</view>
      </view>
    </view>

    <div v-if="isCanTest">
      <!-- &&role!=2 -->
      <button v-if="coursedetailsData.status!=2" class="exam-button colorgrey">参与考试</button>
      <button v-if="coursedetailsData.status==2" class="exam-button" @click="participateExam">参与考试</button>
    </div>
    <!-- <view class="next-course" v-if="coursedetailsData.nextCourseId">
      <text @click="goToNextCourse">下一个课程</text>
    </view> -->
  </view>
</template>

<script setup>
import { studyApi } from "@/api";
import { IMG_URL2 } from "@/config";
import { reactive } from "vue";
let courseId = ref(0);
let currentPage = ref(0);
let watchSecond = ref(0); //观看时长
let videoContext = ref(null);
let currentDetails = ref(0);
let categoryId = ref(0);
let videoTimer = ref(null);
let isCanTest =ref(true)
const participateExam = () => {
  if (!coursedetailsData.examinationQuestionId) {
    uni.showToast({
      title: "该课程没有考试",
      icon: "none"
    });
    return;
  }
  uni.navigateTo({
    url: `/pages/trainingcenter/takethetest?id=${coursedetailsData.examinationQuestionId}&currentPage=${currentPage.value}`,
    fail(err) {
      uni.showToast({
        title: "页面跳转失败",
        icon: "none"
      });
    }
  });
};
const getStatusText = (status) => {
  const statusMap = {
    0: "未完成",
    1: "进行中",
    2: "已学习"
  };
  return statusMap[status];
};
let coursedetailsData = reactive({
  name: "",
  refer: "",
  staffName:'',
  nextCourseId: "",
  isLike: false,
  like: 0,
  status: 1,
  video: "",
  examinationQuestionId: ""
});

const updateCourseStatus = (status) => {
  studyApi
    .STUDYUPDATECOURSESTATUSBYID({ id: courseId.value, status: status, watchSecond: watchSecond.value })
    .then((res) => {
      if (res.code == 200) {
        console.log(res);
        uni.showToast({ title: res.errMsg, icon: "none" });
      } else {
        uni.showToast({ title: res.errMsg, icon: "none" });
      }
    });
};

const goToNextCourse = () => {
  if (coursedetailsData.nextCourseId) {
    uni.navigateTo({
      url: `/pages/trainingcenter/coursedetails?courseId=${coursedetailsData.nextCourseId}&currentPage=${currentPage.value}`
    });
  }
};
const changeLike = () => {
  coursedetailsData.isLike = !coursedetailsData.isLike;
  coursedetailsData.like = coursedetailsData.isLike ? coursedetailsData.like + 1 : coursedetailsData.like - 1;
  studyApi.STUDYLIKEORUNLIKETOCOURSEBYID({ id: courseId.value, isLike: coursedetailsData.isLike }).then((res) => {
    if (res.code == 200) {
      uni.showToast({ title: res.errMsg, icon: "none" });
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  });
};
const getData = () => {
  studyApi
    .STUDYGETCOURSEDETAILBYID({
      categoryId: categoryId.value != 0 ? categoryId.value : "",
      id: courseId.value,
      currentPage: currentPage.value,
      isTaskCheck: true,
      pageSize: 15
    })
    .then((res) => {
      if (res.code == 200) {
        coursedetailsData.name = res.result.name;
        coursedetailsData.refer = res.result.refer;
        coursedetailsData.examinationQuestionId = res.result.examinationQuestionId;
        coursedetailsData.nextCourseId = res.result.nextCourseId;
        coursedetailsData.isLike = res.result.isLike;
        coursedetailsData.like = res.result.like;
        coursedetailsData.status = res.result.status;
        coursedetailsData.video = res.result.video;
        coursedetailsData.integration = res.result.integration;
        coursedetailsData.categoryName = res.result.categoryName;
        coursedetailsData.staffName = res.result.staffName;
        isCanTest.value = res.result.isCanTest;
      } else {
        uni.showToast({ title: res.errMsg, icon: "none" });
      }
    });
};
const videoTimeEndedEvent = (e) => {
  // 播放进度改变
  // e.detail.currentTime为每次触发时,视频的当前播放时间
  let currentTime = e;
 
  console.log("播放进度条改变", currentTime);
  if(videoTimer.value){
    clearInterval(videoTimer.value);
  }
  if (e.type=="ended") {
    coursedetailsData.status = 2;
    updateCourseStatus(2);
  }
};
const videoPlay = (e) => {
  coursedetailsData.status= 1;
  updateCourseStatus(1);
  videoTimer.value = setInterval(() => {
   
  }, 1000);
};

const videoTimeTimeupdateEvent = (e) => {
  // 播放进度改变
  let currentTime = Number(e.detail.currentTime);
  console.log("播放进度条改变", currentTime);
  watchSecond.value = currentTime;
};

onLoad((options) => {
  videoContext.value = uni.createVideoContext("myVideo");
  if (options.courseId) {
    courseId.value = options.courseId;
    currentPage.value = options.currentPage;
    categoryId.value = options.categoryId;
  }
  getData();
});
</script>

<style lang="scss" scoped>
.course-lesson {
  background-color: #ffffff;
  min-height: 100vh;

  .video-placeholder {
    background-color: #f0f0f0;
    height: 420rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .video {
      width: 100%;
    }
  }

  .course-info {
    padding: 30rpx;
    box-sizing: border-box;
    .course-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      .status {
        font-family: PingFang SC;
        font-size: 10px;
        font-weight: 400;
        line-height: 16px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        padding: 2rpx 8rpx;
        box-sizing: border-box;
        border-radius: 2rpx;
      }
      .status-0 {
        color: rgba(214, 142, 68, 1);
        border: 1rpx solid rgba(214, 142, 68, 1);
      }
      .status-1 {
        color: rgba(214, 142, 68, 1);
        border: 1rpx solid rgba(214, 142, 68, 1);
      }
      .status-2 {
        color: rgba(43, 164, 113, 1);
        border: 1rpx solid rgba(43, 164, 113, 1);
      }
      .course-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
    }
    .course-integration{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color:rgba(216, 161, 0, 1);
    margin-bottom: 10rpx;
    display: flex;
    align-items: center;
    .img{
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }

    .course-description {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }

    .course-meta {
      display: flex;
      gap: 30rpx;
      justify-content: space-between;
      margin-bottom: 24rpx;
      .meta-item {
        display: flex;
        align-items: center;
        gap: 10rpx;

        .img {
          width: 28rpx;
          height: 28rpx;
        }

        text {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    .course-assignment {
      font-size: 24rpx;
      display: flex;
      align-items: center;
      .label {
        font-size: 24rpx;
        color: rgba(214, 142, 68, 1);
      }

      .value {
        font-size: 24rpx;
        color: rgba(214, 142, 68, 1);
      }
    }
  }

  .exam-button {
    width: calc(100% - 60rpx);
    height: 88rpx;
    line-height: 88rpx;
    background-color: rgba(214, 142, 68, 1);
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 44rpx;
    margin: 30rpx;
    border: none;

    &:active {
      opacity: 0.8;
    }
  }
  .colorgrey{
    background-color: rgba(246, 216, 185, 1);
  }

  .next-course {
    position: fixed;
    bottom: 100rpx;
    right: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    z-index: 999;

    text {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 1);
    }
  }
}
</style>
